<template>
  <view class="task-item" :class="{ 
    'completed': task.isCompletedToday, 
    'time-morning': timeSlot === 'morning',
    'time-afternoon': timeSlot === 'afternoon',
    'time-evening': timeSlot === 'evening'
  }">
    <!-- 任务内容 -->
    <view class="task-info">
      <view class="task-title">
        {{ task.title }}
        <span :class="['task-type-badge', task.isRecurring ? 'task-type-recurring' : 'task-type-single']">
          {{ task.isRecurring ? '周期' : '单次' }}
        </span>
        <span class="task-duration-badge">
          {{ task.duration }}分钟
        </span>
      </view>
      <view class="task-time">
        {{ getTaskTimeDisplay() }} {{ getRecurrenceText() }}
      </view>
    </view>
    
    <!-- 打卡按钮 -->
    <view class="check-in-btn" :class="{ 'checked': task.isCompletedToday }" @click.stop="toggleCompletion">
      <text v-if="task.isCompletedToday" class="sign-text">签</text>
    </view>
    
    <!-- 滑动操作按钮（隐藏） -->
    <view class="swipe-actions">
      <view class="edit-btn" @click.stop="onEdit">
        <uni-icons type="compose" size="18" color="white"></uni-icons>
      </view>
      <view class="delete-btn" @click.stop="onDelete">
        <uni-icons type="trash" size="18" color="white"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TaskItem',
  props: {
    // 任务数据
    task: {
      type: Object,
      required: true
    },
    // 时间段（上午/下午/晚上）
    timeSlot: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 滑动相关状态
      startX: 0,
      moveX: 0,
      isSliding: false
    }
  },
  mounted() {
    // 为触摸事件添加监听器
    this.initTouchEvents()
  },
  methods: {
    // 初始化触摸事件
    initTouchEvents() {
      const taskItem = this.$el
      
      // 触摸开始
      taskItem.addEventListener('touchstart', (e) => {
        this.startX = e.touches[0].clientX
        this.isSliding = true
      })
      
      // 触摸移动
      taskItem.addEventListener('touchmove', (e) => {
        if (!this.isSliding) return
        
        this.moveX = e.touches[0].clientX
        const diffX = this.moveX - this.startX
        
        // 只有向左滑动且超过50px才显示操作按钮
        if (diffX < -50) {
          taskItem.classList.add('swipe-left')
        } else if (diffX > 50) {
          taskItem.classList.remove('swipe-left')
        }
      })
      
      // 触摸结束
      taskItem.addEventListener('touchend', () => {
        this.isSliding = false
      })
      
      // 点击卡片其他区域关闭操作按钮
      taskItem.addEventListener('click', (e) => {
        if (!e.target.closest('.swipe-actions') && !e.target.closest('.check-in-btn')) {
          taskItem.classList.remove('swipe-left')
        }
      })
    },
    
    // 切换任务完成状态
    toggleCompletion() {
      this.$emit('toggle-completion', this.task.id)
    },
    
    // 编辑任务
    onEdit() {
      this.$emit('edit', this.task)
      // 关闭滑动状态
      this.$el.classList.remove('swipe-left')
    },
    
    // 删除任务
    onDelete() {
      // 显示确认对话框
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个任务吗？',
        success: (res) => {
          if (res.confirm) {
            this.$emit('delete', this.task.id)
          }
        }
      })
      // 关闭滑动状态
      this.$el.classList.remove('swipe-left')
    },
    
    // 获取重复任务的文本描述
    getRecurrenceText() {
      if (!this.task.isRecurring) return ''
      
      const patterns = {
        'daily': '每天',
        'workdays': '工作日',
        'weekends': '周末',
        'weekly': '每周'
      }
      return patterns[this.task.recurrencePattern] || ''
    },
    
    // 获取任务时间显示
    getTaskTimeDisplay() {
      if (!this.task.startTime) return ''
      
      // 模拟时间段显示
      const startTime = this.task.startTime
      let endTime = ''
      
      // 简单计算结束时间（开始时间+时长）
      const [hours, minutes] = startTime.split(':')
      const startMinutes = parseInt(hours) * 60 + parseInt(minutes)
      const endMinutes = startMinutes + this.task.duration
      const endHours = Math.floor(endMinutes / 60).toString().padStart(2, '0')
      const endMins = (endMinutes % 60).toString().padStart(2, '0')
      endTime = `${endHours}:${endMins}`
      
      return `${startTime} - ${endTime}`
    }
  }
}
</script>

<style scoped>
.task-item {
  position: relative;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  border-left: 4px solid #4CAF50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  transition: transform 0.3s ease;
}

/* 已完成任务样式 */
.task-item.completed {
  background-color: #C8E6C9;
  opacity: 0.8;
}

/* 上午任务左侧边框颜色 */
.task-item.time-morning {
  border-left-color: #E64A19; /* 深橙色 */
}

/* 下午任务左侧边框颜色 */
.task-item.time-afternoon {
  border-left-color: #FFEB3B; /* 亮黄色 */
}

/* 晚上任务左侧边框颜色 */
.task-item.time-evening {
  border-left-color: #673AB7;
}

.task-info {
  flex: 1;
}

.task-title {
  font-weight: bold;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

/* 任务类型标签样式 */
.task-type-badge {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: normal;
  margin-left: 8px;
}

/* 周期任务标签样式 */
.task-type-recurring {
  background-color: #e3f2fd;
  color: #1976d2;
}

/* 单次任务标签样式 */
.task-type-single {
  background-color: #fff3e0;
  color: #f57c00;
}

.task-duration-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  background-color: #C8E6C9;
  color: #388E3C;
  margin-left: 8px;
  font-weight: normal;
}

.task-time {
  font-size: 12px;
  color: #757575;
}

/* 打卡按钮 */
.check-in-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #4CAF50;
  background-color: white;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: transparent;
  transition: all 0.3s ease;
}

.check-in-btn.checked {
  background-color: #4CAF50;
  color: white;
}

/* 签到文字样式 */
.sign-text {
  font-size: 14px;
  font-weight: bold;
  color: white;
}

/* 滑动操作按钮 */
.swipe-actions {
  position: absolute;
  right: -100px;
  top: 0;
  height: 100%;
  display: flex;
  transition: right 0.3s ease;
}

.task-item.swipe-left .swipe-actions {
  right: 0;
}

.edit-btn, .delete-btn {
  width: 50px;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit-btn {
  background-color: #FF9800;
}

.delete-btn {
  background-color: #F44336;
}
</style>